<template>
	<view :style="[AppSkinVar]">
		<e-loading-page :loading="loading">
			<template #icon>
				<loader></loader>
			</template>
		</e-loading-page>
		<order-header :info="orderStatus"></order-header>
		<order-tips :info="info" class="e-m-b-20"></order-tips>
		<!-- 协商历史没有暂时不显示 -->
		<!-- <view class="e-p-30 e-flex e-flex-between e-m-t-20 bg-white" @tap="$goTo()">
			<text class="e-font-32 fw-600">{{ $t('order.协商历史') }}</text>
			<image class="img-36" src="/static/layout/basics/right_arrow.png"></image>
		</view> -->
		<template v-if="info?.applyType === 2 && info.returnMoneySts !== 2">
			<view class="bg-white e-flex e-p-l-30" v-if="info.refundSts === 3">
				<view class="e-flex-xy-center address-icon-box">
					<image :src="$staticPath('order/car.png')" mode=""></image>
				</view>
				<view class="e-m-l-20 e-flex-1 e-p-r-60 e-p-t-42 e-p-b-40">
					<view class="e-flex e-font-32 c-35">
						<text>{{ info.expressName }}</text>
					</view>
					<view class="e-font-26 e-m-t-16 c-secondary">
						<text>{{ info.expressNo }}</text>
					</view>
				</view>
			</view>
			<view class="e-m-l-30 e-m-r-30 border-white-bottom" v-if="info.refundSts === 3"></view>
			<view class="bg-white e-flex e-p-l-30" v-if="info.refundSts === 2">
				<view class="e-flex-xy-center address-icon-box">
					<image :src="$staticPath('order/address.png')" mode=""></image>
				</view>
				<view class="e-m-l-20 e-flex-1 e-p-r-60 e-p-t-42 e-p-b-40">
					<view class="e-flex e-flex-between e-font-32 c-35">
						<text>{{ $t('order.收货人') }}: {{ info.receivingName }}</text>
						<text>{{ info.receivingPhone }}</text>
					</view>
					<view class="e-font-26 e-m-t-16 c-secondary">
						<text>{{ $t('order.收货地址') }}: {{ info.receivingAddress }}</text>
					</view>
				</view>
			</view>
			<view class="e-m-l-30 e-m-r-30 border-white-bottom" v-if="info.refundSts === 2"></view>
			<view class="e-flex e-m-b-20 bg-white e-p-l-30 e-p-t-42 e-p-b-42" v-if="info.refundSts === 2">
				<image class="img-66" :src="$staticPath('order/red-car.png')" mode=""></image>
				<view class="e-flex e-flex-1 e-flex-between e-m-l-20">
					<view class="">
						<view class="c-35">
							<text class="e-font-32">{{ $t('order.我已寄出') }}</text>
						</view>
						<view class="e-m-t-16">
							<text class="c-secondary e-font-26">{{ $t('order.点击填写物流单号') }}</text>
						</view>
					</view>
					<view class="e-m-r-30 submit-id-btn" @tap="showDialog = true">
						<text class="e-font-28 c-34">{{ $t('order.填写单号') }}</text>
					</view>
				</view>
			</view>
		</template>
		<view class="e-m-t-20" v-if="info?.params.deputy">
			<order-goods-card :goodsList="[info.params.deputy]" :isJump="true" goodsLink="/pages/classify/goods/info/index">
				<template v-slot:header>
					<text>{{ $t('order.退款编号') }}：{{ info.refundSn }}</text>
				</template>
			</order-goods-card>
		</view>

		

		<order-info :info="info||{}" type="refund"></order-info>
		<view class="e-p-t-20">
			<contact-view customClass="shadow-f3 bg-white e-p-24 e-flex-xy-center" :contact="false" @tapContact="handleTapContact" v-if="SHOW_KEFU">
				<text class="iconfont icon-dingdanxiangqingkefuicon e-font-36 c-primary e-p-r-22"></text>
				<text class="e-font-30">{{ $t('order.联系卖家') }}</text>
			</contact-view>
		</view>
		<view style="height: 120rpx"></view>
		<view class="order-button bg-white">
			<order-button :info="info" type="refund" :isDetail="true" @cancelRefund="cancelRefund"></order-button>
			<view class="ios-btm"></view>
		</view>
		<e-popup :show="showDialog" mode="center" :round="10">
			<view class="bg-white e-popup-box e-p-b-40">
				<view class="close-btn">
					<image class="img-28" :src="$staticPath('order/close.png')" mode="" @tap="showDialog = false"></image>
				</view>
				<view class="e-p-t-40 e-m-b-38 text-center">
					<text class="e-font-32 c-34">{{ $t('order.填写快递单号') }}</text>
				</view>
				<view class="input-box e-m-b-20">
					<input class="e-font-28" type="text" v-model="expressNumber" :placeholder="$t('order.请输入快递单号')" placeholderStyle="color: #B3B3B3" />
				</view>
				<view class="input-box e-m-b-30 e-flex e-flex-between" @tap="showLogistics = true">
					<text class="e-font-28 c-b3">
						<template v-if="selectLogistics">{{ selectLogistics.name }}</template>
						<template v-else>{{ $t('order.请选择物流公司') }}</template>
					</text>
					<image class="img-36" :src="$staticPath('order/arrow.png')" mode=""></image>
				</view>
				<view class="e-popup-submit-btn" @tap="handleSubmit">
					<text class="e-font-28 c-white">{{ $t('common.确定') }}</text>
				</view>
			</view>
		</e-popup>
		<e-picker
			:cancelText="$t('common.取消')"
			:confirmText="$t('common.确认')"
			:show="showLogistics"
			:columns="columns"
			@cancel="showLogistics = false"
			@confirm="handleConfirm"
		></e-picker>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { getRefundOrderDetail, postCancelRefund, submitExpress, getLogisticsList, getStoreUserThirdId } from '@/common/request/api';
import type { LogisticsItem } from '@/common/request/api';
import orderHeader from '../child/order-header.vue';
import orderTips from './child/order-tips.vue';
import orderInfo from '../child/order-info.vue';
import orderButton from '../child/order-button.vue';
import { SHOW_KEFU } from '@/env';
import { useCurrentInstance, usePromise } from '@/common/hooks';
import { useI18n } from 'vue-i18n';
import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app';

const ctx = useCurrentInstance();

const loading = ref(false);
let orderId = '';

const [getLogisticsListData, logisticsList] = usePromise(async () => {
	const res = await getLogisticsList();
	return res.data;
});
const columns = computed(() => [logisticsList.value?.map?.((item) => item.name) || []]);

const orderStatus = ref<{
	title: string;
	icon?: string;
}>({
	title: '',
	icon: '6'
});
const orderStatusMap = [
	{
		title: '退款关闭',
		icon: '5'
	},
	{
		title: '耐心等待商家处理'
		// icon: '6',
	},
	{
		title: '退款成功',
		icon: '4'
	},
	{
		title: '商家拒绝',
		icon: '5'
	}
];
const [getData, info] = usePromise(async () => {
	loading.value = true;
	try {
		const res = await getRefundOrderDetail(orderId);
		loading.value = false;

		orderStatus.value = orderStatusMap[res.data.refundSts];
		// 退款退货
		if (res.data.applyType === 2) {
			switch (res.data.refundSts) {
				case 0:
					orderStatus.value = orderStatusMap[res.data.refundSts];
					break;
				case 1:
					orderStatus.value = orderStatusMap[res.data.refundSts];
					break;
				case 2:
					orderStatus.value = {
						title: '商家已同意退款退货'
					};
					break;
				case 3:
					orderStatus.value = orderStatusMap[res.data.refundSts];
					break;
				case 4:
					orderStatus.value = {
						title: '待商家确认收货'
					};
					break;
				case 5:
					// returnMoneySts 0: 待处理 1: 已退款 2: 退款失败
					if (res.data.returnMoneySts === 0) {
						orderStatus.value = {
							title: '商家已确认收货'
						};
					} else if (res.data.returnMoneySts === 1) {
						orderStatus.value = {
							title: '退款退货成功',
							icon: '4'
						};
					} else {
						orderStatus.value = {
							title: '商家拒绝',
							icon: '5'
						};
					}
					break;
			}
		}
		return res.data;
	} catch (e) {
		loading.value = false;
	}
});

const showDialog = ref(false);
const showLogistics = ref(false);

const selectLogistics = ref<LogisticsItem>();
const expressNumber = ref('');

const cancelRefund = () => {
	postCancelRefund(orderId).then(() => {
		getData();
	});
};
const handleSubmit = () => {
	const params = {
		refundId: info.value!.refundId,
		expressNumber: expressNumber.value,
		expressId: selectLogistics.value!.id!
	};
	submitExpress(params).then(() => {
		getData();
		showDialog.value = false;
	});
};
const handleConfirm = (val: { indexs: number[] }) => {
	const index = val.indexs[0];
	selectLogistics.value = logisticsList.value![index];
	showLogistics.value = false;
};
const handleTapContact = () => {
	getStoreUserThirdId({
		userThirdId: info.value!.storeId
	}).then((res) => {
		ctx.$goTo('/pages/public/msg/detail', {
			user: res.data.chatlinkid,
			bId: res.data.chat.bizid,
			sId: info.value!.storeId,
			name: res.data.chat.name,
			sT: info.value!.params.store.type!
		});
	});
};

onLoad((opt) => {
	orderId = opt!.id;
	getLogisticsListData();
});
onShow(() => {
	getData();
});

onPullDownRefresh(() => {
	loading.value = true;
	getData().finally(() => {
		uni.stopPullDownRefresh();
	});
});
</script>

<style lang="scss" scoped>
.refund-button {
	width: 126rpx;
	height: 52rpx;
	border-radius: 26rpx;
	border: 2rpx solid #b3b3b3;
	margin: 0;
	font-size: 26rpx;
	line-height: 52rpx;
}

.order-button {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
}

.address-icon-box {
	width: 66rpx;
	height: 66rpx;
	background: linear-gradient(45deg, #f5222d 0%, #ff8f8b 100%);
	border-radius: 50%;

	image {
		width: 36rpx;
		height: 36rpx;
	}
}

.submit-id-btn {
	width: 172rpx;
	height: 60rpx;
	border-radius: 30rpx;
	border: 1rpx solid #b4b4b4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.e-popup-box {
	border-radius: 20rpx;
	position: relative;
	width: 610rpx;
	overflow: hidden;

	.close-btn {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.input-box {
		border-radius: 10rpx;
		border: 2rpx solid #ededed;
		height: 90rpx;
		margin: 0 60rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}

	.e-popup-submit-btn {
		width: 400rpx;
		height: 90rpx;
		background: #f5222d;
		border-radius: 45rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.c-b3 {
		color: #b3b3b3;
	}
}
</style>
